<template>
  <div class="login-container">
    <el-card class="box-card">
      <video src="../../assets/background.mp4" autoplay="autoplay" loop="loop" muted="muted" />
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
        <div class="title-container">
          <h3 class="title"><img src="https://fe-slwl-manager.itheima.net/static/img/logo1.33ef7fa0.png" alt=""></h3>
        </div>
        <!-- 用户名 -->
        <el-form-item prop="account">
          <span class="svg-container">
            <svg-icon icon-class="user" />
          </span>
          <el-input v-model="loginForm.account" />
        </el-form-item>
        <!-- 密码 -->
        <el-form-item ref="pwd" prop="password">
          <span class="svg-container">
            <svg-icon icon-class="password" />
          </span>
          <el-input v-model="loginForm.password" :type="passwordType" />
          <span class="show-pwd" @click="showPwd">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item prop="code">
          <span class="svg-container">
            <svg-icon icon-class="code" class="code_svg_icon" />
            <span class="show-code">
              <img :src="imgUrl" alt="" @click="getImageCode">
            </span>
          </span>
          <el-input v-model="loginForm.code" @input="debounceCodeIpt" />
        </el-form-item>
        <el-button type="primary" style="width:100%;margin-bottom:30px;" @click="handleLogin">登录</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getImageCode } from '@/api/user'
// 导入防抖函数
export default {
  name: 'LoginPage',
  data() {
    return {
      imgUrl: '',
      loginForm: {
        account: process.env.NODE_ENV === 'development' ? 'demo' : '',
        password: process.env.NODE_ENV === 'development' ? 'hm#qd@23!' : '',
        code: '',
        key: Math.random()
      },
      passwordType: 'password',
      loginRules: {
        account: [
          { required: true, message: '请输入用户名', trigger: 'blur' }

        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    // 在计算属性中返回一个新的防抖函数
    debounceCodeIpt() {
      return this.debounce(this.codeIpt, 500)
    }
  },
  async created() {
    this.getImageCode()
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
    },
    async handleLogin() {
      try {
        await this.$refs.loginForm.validate()
        await this.$store.dispatch('user/loginPage', this.loginForm)
        this.$router.push(this.$route.query.redirect || '/')
      } catch (err) {
        this.getImageCode()
        console.log(err)
      }
    },
    // 获取验证码
    async getImageCode() {
      const result = await getImageCode({
        key: this.loginForm.key
      })
      const fr = new FileReader()
      fr.onload = (e) => {
        this.imgUrl = e.target.result
      }
      fr.readAsDataURL(result)
    },
    // 定义code中数据
    codeIpt(e) {
      this.code = e
    },
    // 封装防抖函数
    debounce(func, ms) {
      let timer = null
      return function(...args) {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          func.apply(this, args)
        }, ms)
      }
    }
  }
}
</script>

<style lang="scss">
video {
   position: fixed;
   top: 0;
   left: 0;
   object-fit: cover;
   width: 100%;
   height: 100%;
   z-index: -1;
}
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
    .box-card {
     margin: auto;
    }
  .login-form {
    width: 400px;
    max-width: 100%;
    height: 380px;
    background-color: #fff;
    padding: 5px 25px 0;
    margin: 0 auto;
  }}
  .login-container .title-container img{
   height: 54px;
}
// 每一项form
 .el-form-item {
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    color: #606266;
    display: inline-block;
    outline: 0;
    padding: 0 15px;
    width: 100%;
  }
.login-container {
  .el-input {
    display: inline-block;
    height: 35px;
    width: 85%;
    input {
      border: 0px;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      height: 35px;
    }
  }
}
 .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }
   .svg-container {
    padding: 2px 5px 2px 15px;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }
   .title-container {
    position: relative;
    .title {
      font-size: 26px;
      text-align: center;
      font-weight: bold;
    }
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    cursor: pointer;
  }
  .show-code{
     position: absolute;
     right: 0px;
     top: 0px;
     z-index: 1;
  }
  .code_svg_icon{
    display: inline-block;
    height: 20px !important;
    width: 20px !important;
    margin-left:-5px ;
  }
</style>
